<template>
  <view class="box1">
    <div class="nav">
      <uni-icons
        class="icon"
        @click="huitui"
        color="#fff"
        ;
        type="back"
        size="20"
      ></uni-icons>
      <text class="fabu"> 添加图片</text>
    </div>
   <view class="main">
     <view class="one" v-for="(item,index) in objUpdate" :key="index">
        <view class="left">
            <text>{{ item.title }}</text>
		<view>
			<view v-if="item.id === 1" class="art">
				<view class="example-body">
				<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
			</view>
			</view>
			<view v-if="item.id === 2"  class="art">
				<uni-file-picker limit="3" title="最多上传3张" style="width: 200px;height: 200px;"></uni-file-picker>
			</view>
			<view v-if="item.id === 3"  class="art">
				<uni-file-picker limit="10" title="最多上传10张" style="width: 200px;height: 200px;"></uni-file-picker>
			</view>
			<view v-if="item.id === 4"  class="art">
				<uni-file-picker  title="请点击选择封面图" limit="1"  style="width: 200px;height: 200px;"></uni-file-picker>
			</view>
		</view>
		</view>
	 </view>
   </view>
   
  </view>
</template>

<script setup>

import {reactive} from 'vue';

// 退回首页
const huitui = () => {
	console.log('回退');
 uni.navigateBack({
  delta: 1, // 返回的页面数，如果delta大于现有页面数，则返回到首页
  success: function() {
    console.log('页面回退成功');
  }
});
};

// 上传排版数据
let objUpdate = reactive([
	{
		id:1,
       title:'室内图/视频',
	   desc:'最多上传10张0/10',
	   imgs:'http://10.31.71.52:7002/public/static/pubImage/chuan.png'
	},
	{
		id:2,
       title:'户型图',
	   desc:'最多上传3张0/3',
	   imgs:'http://10.31.71.52:7002/public/static/pubImage/chuan.png'
	},
	{
		id:3,
       title:'室外图',
	   desc:'最多上传10张0/10',
	   imgs:'http://10.31.71.52:7002/public/static/pubImage/chuan.png'
	},
	{
		id:4,
       title:'设置点击选择封面',
	   desc:'请点击选择封面图',
	   imgs:'http://10.31.71.52:7002/public/static/pubImage/chuan.png'
	}
])

</script>

<style lang="scss">
 .box1{
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	.nav {
    width: 100vw;
    height: 100px;
    background: linear-gradient(to right, #3e85ef, rgb(46, 175, 255));
    position: relative;
    .fabu {
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%, -50%);
      color: #fff;
    }
    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
    }
  }
.main{
	flex: 1;
	overflow: auto;
	background-color: #fff;
	.one{
		width: 100vw;
		height: 200px;
		display: flex;
		box-sizing: border-box;
		padding: 20px;
		margin-top: 15px;
		.left{
			width: 100%;
			height: 100%;
			font-size: 19px;
		
			// font-weight: bold;
			.art{
				width: 330px;
				height: 170px;
				margin-top: 15px;
				overflow: auto;
			}
		}
		// .right{
		// 	width: 40%;
		// 	height: 100%;
		// 	color: #ccc;
		// 	font-size: 12px;
        //     text{
		// 		position: relative;
		// 		left: 40px;
		// 	}
		// }
		.uni-file-picker__container{
				width: 300px;
			}
			.example-body {
		padding: 10px;
		padding-top: 0;
	}
	}
}
 }
 


</style>
